import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore(
  'app',
  () => {
    // 侧边栏状态
    const sidebar = ref({
      opened: true,
      withoutAnimation: false,
    })

    // 设备类型
    const device = ref<'desktop' | 'mobile'>('desktop')

    // 语言
    const language = ref('zh-CN')

    // 页面加载状态
    const pageLoading = ref(false)

    // 切换侧边栏
    const toggleSideBar = () => {
      sidebar.value.opened = !sidebar.value.opened
      sidebar.value.withoutAnimation = false
    }

    // 关闭侧边栏
    const closeSideBar = (withoutAnimation: boolean) => {
      sidebar.value.opened = false
      sidebar.value.withoutAnimation = withoutAnimation
    }

    // 打开侧边栏
    const openSideBar = (withoutAnimation: boolean) => {
      sidebar.value.opened = true
      sidebar.value.withoutAnimation = withoutAnimation
    }

    // 切换设备类型
    const toggleDevice = (deviceType: 'desktop' | 'mobile') => {
      device.value = deviceType
    }

    // 设置语言
    const setLanguage = (lang: string) => {
      language.value = lang
    }

    // 设置页面加载状态
    const setPageLoading = (loading: boolean) => {
      pageLoading.value = loading
    }

    return {
      sidebar,
      device,
      language,
      pageLoading,
      toggleSideBar,
      closeSideBar,
      openSideBar,
      toggleDevice,
      setLanguage,
      setPageLoading,
    }
  },
  {
    persist: {
      key: 'kexilo-app',
      storage: localStorage,
      paths: ['sidebar', 'language'],
    },
  }
)
